<template>
	<view class="work-item" @tap="toPage('/pages/Job/index')" :style="{backgroundColor:bgColor}">
		<view class="work_cont">
			<view class="status">
				<text class="dev">开发中</text>
				<text class="stop">项目终止</text>
				<text class="settle">已结算</text>
				
			</view>
			<view class="cont">
				<view class="left">
					<view class="title u-line-1">刷题APP优化项目</view>
					<view class="type u-line-1">类型：Aandroid</view>
					<view class="progress u-line-1">
						进展:04-28:发布子项目:刷题app项
						进展:04-28:发布子项目:刷题app项
					</view>
				</view>
				<u-circle-progress 
				border-width="6" 
				width="110" 
				inactive-color="#EAEAEA" 
				active-color="#2979ff" 
				:percent="50">
					<view class="u-progress-content">
						<view class="number">1/2</view>
						<text class='u-progress-info'>完成度</text>
					</view>
				</u-circle-progress>
			</view>
			<view class="date">
				2021-06-06
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			bgColor:{
				type:String,
				default:()=>{
					return "#ffffff"
				}
			}
		},
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			//跳转
			toPage(url){
				console.log('[跳转]')
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-item{
		padding:0 30rpx;
		margin-top: 30rpx;
		border-radius: 8rpx;
		.work_cont{
			padding: 20rpx;
			// background-color: #FFFFFF;
			
			.status{
				text{
					display: inline-block;
					padding: 5rpx 25rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 37rpx;
					border-radius: 23rpx;
					margin-bottom: 34rpx;
				}
				.dev{
					background: #4A90E2;
				}
				.stop{
					background: #D2D2D2;
					
				}
				.settle{
					background: #23CA45;							
				}
			}
			.cont{
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				border-bottom: 1px solid #E6E6E6;
				padding-bottom: 16rpx;
				.left{
					width: calc(100% - 120rpx);
					.title{
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
						line-height: 32rpx;
					}
					.type,.progress{
						font-size: 28rpx;
						font-weight: 400;
						color: #888888;
						line-height: 40rpx;
					}
					.type{
						margin-top: 15rpx;
					}
				}
				.u-progress-content{
					text-align: center;
					font-size: 0;
					.number{
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 32rpx;
					}
					.u-progress-info{
						font-size: 18rpx;
						font-weight: 400;
						color: #333333;
						line-height: 25rpx;
					}
				}
				/deep/.u-circle-progress{
					background-color: transparent!important;
				}
			}
			.date{
				text-align: right;
				font-size: 24rpx;
				font-weight: 400;
				color: #888888;
				line-height: 33rpx;
				padding-top: 15rpx;
			}
		}
	}
	
</style>
